<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>豆瓣首页</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/head.css">
    <link rel="stylesheet" href="./css/main.css">
    <script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!-- 头部 -->
<div id="header">
   <!-- 顶部导航 -->
   <div id="list">
       <ul>
           <li><a href="#">豆瓣</a></li>
           <li><a href="#">读书</a></li>
           <li><a href="#">电影</a></li>
           <li><a href="music.html">音乐</a></li>
           <li><a href="#">同城</a></li>
           <li><a href="#">小组</a></li>
           <li><a href="#">阅读</a></li>
           <li><a href="#">F M</a></li>
           <li><a href="#">东西</a></li>
           <li><a href="#">集市</a></li>
           <li><a href="#">更多</a></li>
       </ul>
       <!-- 顶部导航右边列表 -->
       <div class="head-rig">
           <span>
               <a id="downLoad" href="#">下载豆瓣客户端</a>
               <img src="images/main/douban.png" />    
           </span>
           <span><a href="#">豆邮</a></span>
           <span><a href="#">提醒</a></span>
           <span>
               <a id="count" href="#">NINY的帐号</a>
               <ul>
                   <li><a href="myPage.html">个人主页</a></li>
                   <li>我的订单</li>
                   <li>我的钱包</li>
                   <li>账号管理</li>
                   <li>退出</li>
               </ul>
           </span>
        </div>
        <!-- 顶部导航右边列表结束 -->
   </div>
   <!-- 顶部导航结束 -->
   <!-- 搜索栏 -->
   <div id="search">
       <a href="main.html"><img src="images/main/douban.jpg" /></a>
       <ul>
           <li><a href="main.html">首页</a></li>
           <li><a href="myPage.html">我的豆瓣</a></li>
           <li><a href="music.html">豆瓣音乐</a></li>
           <li><a href="#">移动应用</a></li>
           <li><a href="#">游戏</a></li>
           <li><a href="#">线上活动</a></li>
       </ul>
       <input type="text" placeholder="搜索你感兴趣的内容和人..."/>
   </div>
   <!-- 搜索栏结束 -->
</div>
<!-- 头部结束 -->

<!-- 内容 -->
<div id="content">
    <div id="main">
      <div id="left">
          <!-- 发表类型 -->
          <div class="say">
              <ul>
                    <li><img src="images/main/1.png" /><a href="#">说句话</a></li>
                    <li><img src="images/main/2.png" /><a href="#">发照片</a></li>
                    <li><img src="images/main/3.png" /><a href="#">推荐网页</a></li>
                    <li><img src="images/main/4.png" /><a href="#">写日记</a></li>
                    <li><img src="images/main/5.png" /><a href="#">发布东西</a></li>
              </ul>
                <span><img src="images/main/8.png" />首页设置</span>
                <input type="text" placeholder="分享生活点滴..."/>
          </div>
          <!-- 发表类型结束 -->
            <ul class="list">
              <li>
                  <img src="images/main/head1.png" />
                    <div class="box">
                      <span><strong>Doreen</strong> 的评论:</span>
                        <div class="text">
                          <h3><a href="#">长文慎入 | 生而为人，注定要受自由之苦</a></h3>
                            <p>
                              <img src="images/main/photo1.jpg" />
                              这部电影有一个直白的标题，不是《她与他》，不是《傲慢与偏见》，不是《志明与春娇》，是《男与女》。男与女，剥离了一切社会意涵和主体性，赤裸如亚当和夏娃，一叶蔽体地入画，被毒蛇引诱吃下禁果...
                            </p>
                        </div>
                        <span>19分钟，来自 热门精选</span>
                    </div>
                </li>
                <li>
                  <img src="images/main/head2.png" />
                    <div class="box">
                      <span><strong>西门不庆</strong> 的日记:</span>
                        <div class="text">
                          <h3><a href="#">没有在圣诞节里失去蛋蛋，怎可语喵生？</a></h3>
                            <p>
                              <img src="images/main/photo2.png" />
                              自小与人类厮混的我喵，既有喵星人的自尊，又习得了人类的智慧，它那高贵的血统与旷世华美的颜值，日后将成为它称霸的核武器。 我家书多，我喵虽然打小顽劣，但也沾染了一些书卷气。 它年纪...
                            </p>
                        </div>
                        <span>1小时，来自 热门精选</span>
                    </div>
                </li>
                <li>
                  <img src="images/main/head3.jpg" />
                    <div class="box">
                      <span><strong>福桃</strong> 的日记:</span>
                        <div class="text">
                          <h3><a href="#">福桃 | 什么？柚子茶其实和柚子没半毛钱关系！</a></h3>
                            <p>
                              <img src="images/main/photo3.jpg" />
                              李舒 MOMO酱 福桃 柚子季到了。 一群人欢欣鼓舞说：“啊，又可以吃柚子了！” 另一群人欢欣鼓舞说：“啊，又可以做蜂蜜柚子茶啦！” 不管是下厨APP，还是微信公众号，都会推出一百八十种在家...
                            </p>
                        </div>
                        <span>3小时，来自 热门精选</span>
                    </div>
                </li>
                <li>
                  <img src="images/main/head4.png" />
                    <div class="box">
                      <span><strong>骆瑞生</strong> 的日记:</span>
                        <div class="text">
                          <h3><a href="#">傍晚的回思，我和我的爷爷</a></h3>
                            <p>
                              我从我爷爷身上越发发现，人一老就蓦然寂寞了。 我记得我小时候第一次写毛笔字，小小的身子趴在桌子上，手像是鸡爪一样抓住毛笔杆子，一个字一个字地写，写得歪歪扭扭的。我爷爷就在背后看，...
                            </p>
                        </div>
                        <span>今天，来自 热门精选</span>
                    </div>
                </li>
                <li>
                  <img src="images/main/head4.png" />
                    <div class="box">
                      <span><strong>骆瑞生</strong> 的日记:</span>
                        <div class="text">
                          <h3><a href="#">傍晚的回思，我和我的爷爷</a></h3>
                            <p>
                              我从我爷爷身上越发发现，人一老就蓦然寂寞了。 我记得我小时候第一次写毛笔字，小小的身子趴在桌子上，手像是鸡爪一样抓住毛笔杆子，一个字一个字地写，写得歪歪扭扭的。我爷爷就在背后看，...
                            </p>
                        </div>
                        <span>今天，来自 热门精选</span>
                    </div>
                </li>
                <li>
                  <img src="images/main/head4.png" />
                    <div class="box">
                      <span><strong>骆瑞生</strong> 的日记:</span>
                        <div class="text">
                          <h3><a href="#">傍晚的回思，我和我的爷爷</a></h3>
                            <p>
                              我从我爷爷身上越发发现，人一老就蓦然寂寞了。 我记得我小时候第一次写毛笔字，小小的身子趴在桌子上，手像是鸡爪一样抓住毛笔杆子，一个字一个字地写，写得歪歪扭扭的。我爷爷就在背后看，...
                            </p>
                        </div>
                        <span>今天，来自 热门精选</span>
                    </div>
                </li>
                <li>
                  <img src="images/main/head4.png" />
                    <div class="box">
                      <span><strong>骆瑞生</strong> 的日记:</span>
                        <div class="text">
                          <h3><a href="#">傍晚的回思，我和我的爷爷</a></h3>
                            <p>
                              我从我爷爷身上越发发现，人一老就蓦然寂寞了。 我记得我小时候第一次写毛笔字，小小的身子趴在桌子上，手像是鸡爪一样抓住毛笔杆子，一个字一个字地写，写得歪歪扭扭的。我爷爷就在背后看，...
                            </p>
                        </div>
                        <span>今天，来自 热门精选</span>
                    </div>
                </li>
                <li>
                  <img src="images/main/head4.png" />
                    <div class="box">
                      <span><strong>骆瑞生</strong> 的日记:</span>
                        <div class="text">
                          <h3><a href="#">傍晚的回思，我和我的爷爷</a></h3>
                            <p>
                              我从我爷爷身上越发发现，人一老就蓦然寂寞了。 我记得我小时候第一次写毛笔字，小小的身子趴在桌子上，手像是鸡爪一样抓住毛笔杆子，一个字一个字地写，写得歪歪扭扭的。我爷爷就在背后看，...
                            </p>
                        </div>
                        <span>今天，来自 热门精选</span>
                    </div>
                </li>
                <li>
                  <img src="images/main/head4.png" />
                    <div class="box">
                      <span><strong>骆瑞生</strong> 的日记:</span>
                        <div class="text">
                          <h3><a href="#">傍晚的回思，我和我的爷爷</a></h3>
                            <p>
                              我从我爷爷身上越发发现，人一老就蓦然寂寞了。 我记得我小时候第一次写毛笔字，小小的身子趴在桌子上，手像是鸡爪一样抓住毛笔杆子，一个字一个字地写，写得歪歪扭扭的。我爷爷就在背后看，...
                            </p>
                        </div>
                        <span>今天，来自 热门精选</span>
                    </div>
                </li>
                <li>
                  <img src="images/main/head4.png" />
                    <div class="box">
                      <span><strong>骆瑞生</strong> 的日记:</span>
                        <div class="text">
                          <h3><a href="#">傍晚的回思，我和我的爷爷</a></h3>
                            <p>
                              我从我爷爷身上越发发现，人一老就蓦然寂寞了。 我记得我小时候第一次写毛笔字，小小的身子趴在桌子上，手像是鸡爪一样抓住毛笔杆子，一个字一个字地写，写得歪歪扭扭的。我爷爷就在背后看，...
                            </p>
                        </div>
                        <span>今天，来自 热门精选</span>
                    </div>
                </li>
                
            </ul>
        </div>
        <div id="right">
          <div class="rig-top">
              <h3>豆瓣正在发生.....</h3>
                <p><a href="#">瓣我同行·我的豆瓣2016观影报告</a></p>
                <p><a href="#">豆瓣2016年度读书榜单揭晓</a></p>
            </div>
            <div class="ad"><img src="images/main/ad.jpg" /></div>
            <!-- 热门话题 -->
            <div class="hotTopic">
                <p><h4>热门话题</h4><a href="#" class="more">更多</a></p>
                <dl>
                    <dt><a href="#">相亲记</a></dt>
                    <dd>你和坐在对面的人相处愉快吗？<em> 55条内容</em></dd>
                </dl>
                <dl>
                    <dt><a href="#">我的2016年度观影报告</a></dt>
                    <dd>一起来盘点今年看过的电影<em> 6873条内容</em></dd>
                </dl>
                <dl>
                    <dt><a href="#">2017新年计划</a></dt>
                    <dd>愿明年今日它也是你的年终总结<em>3168条内容</em></dd>
                </dl>
                <dl>
                    <dt><a href="#">2016年终总结</a></dt>
                    <dd>细数这一年打动你的新砖好碟<em> 335条内容</em></dd>
                </dl>
                <dl>
                    <dt><a href="#">我的2016年度音乐报告</a></dt>
                    <dd>细数这一年打动你的新砖好碟<em> 335条内容</em></dd>
                </dl>
                <dl>
                    <dt><a href="#">我的2016年度读书报告</a></dt>
                    <dd>回顾这一年与书籍相伴的时光<em> 1050条内容</em></dd>
                </dl>
            </div>
            <!-- 热门话题结束 -->
            <div style="clear:both"></div>
            <!-- 我的关注 -->
            <div class="attention">
                <p><h4>我的关注</h4><span class="more"><a href="javascript:">成员0 </a><a href="javascript:">小站0 </a></span></p>
                <p><a href="javascript:">> 被1人关注</a></p>
                <p><a href="javascript:">> 申请创建小站</a></p>
            </div>
            <!-- 我的关注结束 -->
            
            <!-- 右边豆瓣图片 -->
            <div class="rig-bot">
                <img src="images/main/sao.png" />
            </div>
            <div style="clear:both"></div>
            <!-- 右边豆瓣图片结束 -->
            <div id="activity">
                <!-- 热门活动 -->
                <div class="activity">
                    <p><h4>热门活动</h4><a href="javascript:" class="more">( 换一个 )</a></p>
                    <p><a href="javascript:">来一句王家卫式的话</a></p>
                    <p><span>时间：2月25日 - 5月24日</span></p>
                    <p><span>参加：1693人参加</span></p>
                    <p><a href="javascript:">> 更多线上活动</a></p>
                </div>
                <!-- 热门活动结束 -->
                
                <!-- 右边底部图片 -->
                <img src="./images/main/ad1.jpg" alt="" class="ad1">
                <!-- 右边底部图片结束 -->
            </div>
        </div>

    </div>
        <div style="clear:both"></div>
        <div class="page">
          <span><前页</span>
          <ul>
            <li><a href="javascript:">1</a></li>
            <li><a href="javascript:">2</a></li>
            <li><a href="javascript:">3</a></li>
            <li><a href="javascript:">4</a></li>
            <li><a href="javascript:">5</a></li>
            <li><a href="javascript:">6</a></li>
            <li><a href="javascript:">...</a></li>
          </ul>
          <span><a href="javascript:">后页></a></span>
        </div>
    <!-- 底部 -->
    <div id="footer">
      © 2005－2017 douban.com, all rights reserved 北京豆网科技有限公司 
        <ul>
          <li><a href="#">关于豆瓣·</a></li>
            <li><a href="#">在豆瓣工作 ·</a></li>
            <li><a href="#">联系我们 ·</a></li>
            <li><a href="#">免责声明 ·</a></li>
            <li><a href="#">帮助中心 ·</a></li>
            <li><a href="#">移动应用 ·</a></li>
            <li><a href="#">豆瓣广告</a></li>
        </ul>
    </div>
    <!-- 底部结束 -->
</div>

<script src="./js/head.js"></script>
</body>
</html>
